<template>
	<view class="noticeDetailLayout">
		<view class="title">
			<view class="tagBox">
				<uni-tag text="置顶" inverted type="success" v-if="notice.select"/>
			</view>
			<view class="textBox">
				<text class="text" selectable>{{notice.title}}</text>
			</view>
		</view>
		<view class="info">
			<view class="author">{{notice.author}}</view>
			<view class="date">
				<uni-dateformat :date="notice.publish_date" format="yyyy-MM-dd hh:mm:ss"/>
			</view>
		</view>
		<view class="content" v-html="notice.content">
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import { apiGetNoticeById } from '@/api/index.js'
	import { onLoad } from '@dcloudio/uni-app'
	import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
	
	const notice = ref({
    "title": "清明时节 踏青赏春正当时",
    "content": {
        "ops": [
            {
                "insert": "\t\t",
                "attributes": {}
            },
            {
                "insert": "清明时节，春和景明。上海东平国家森林公园里繁花似锦，人们徜徉其间，赏花踏青，感受春天的气息。这里还举办了民俗市集，让游客们品尝当地的花式糕点、菜头烧饼等美食，体验传统民俗。天津五大道文化旅游区的海棠花竞相绽放、如云似霞，游人可以漫步花海拍照打卡，也可以逛市集、看演出，乐享假日时光。在江苏盐城大丰，千万株郁金香竞相绽放，将大地装点成绚丽的调色盘，景区举办花车巡游、民俗表演等，让游客们沉浸式体验文旅活动。",
                "attributes": {
                    "color": "#333333",
                    "fontSize": "18px",
                    "fontFamily": "arial"
                }
            },
            {
                "insert": "\n",
                "attributes": {}
            },
            {
                "insert": {
                    "image": "https://cdn.isscloud.site/public/uni-media-library/2025/4/8/1744112002835_90580.webp"
                },
                "attributes": {
                    "width": "293",
                    "data-custom": "source=https://cdn.isscloud.site/public/uni-media-library/2025/4/8/1744112002835_90580.webp"
                }
            },
            {
                "insert": "\n\n\n\n",
                "attributes": {}
            }
        ]
    },
    "excerpt": "",
    "user_id": "67e7faaf5c8679990ba5fab1",
    "thumbnail": [
        "https://cdn.isscloud.site/public/uni-media-library/2025/4/8/1744112003285_56615.webp"
    ],
    "publish_ip": "127.0.0.1",
    "view_count": 6,
    "category_id": "67f21b82f9a2858b65187da0",
    "publish_date": 1743920190941,
    "article_status": 1,
    "last_modify_ip": "127.0.0.1",
    "last_modify_date": 1743920190963
})
	
	// 页面加载id
	onLoad(e=>{
		let id = e.id || ''
		getNoticeDetail(id)
	})
	
	const getNoticeDetail = async (id) => {
		let data = await apiGetNoticeById({id})
		const converter = new QuillDeltaToHtmlConverter(data.content.ops, {})
		data.content = converter.convert()
		notice.value = data
	}
</script>

<style lang="scss" scoped>
.noticeDetailLayout{
	padding: 20rpx;
	.title{
		display: flex;
		justify-content: center;
		align-items: flex-start;
		.tagBox{
			width: 120rpx;
			padding: 16rpx 0;
		}
		.textBox{
			flex: 1;
			.text{
				color: $text-color-mian;
				font-size: 42rpx;
				line-height: 1.5em;
			}
		}
	}
	.info{
		margin: 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: $text-color-sub;
		font-size: 30rpx;
		.date{
			margin-left: 20rpx;
		}
	}
	.content {
		line-height: 1.8;
		font-size: 32rpx;
		color: #333;
		margin-bottom: 60rpx;
	}
}
</style>
